import React, { useRef } from "react";
import { AddNewItem } from "./AddNewItem";
import { useAppState } from "./AppStateContext";
import { Card } from "./Card";
import { ColumnContainer, ColumnTitle } from './styles';
import { useItemDrag } from "./useItemDrag";

type ColumnProps = {
    text?: string | undefined
    index: number
    id: string
}



export const Column = ({ text, index, id }: ColumnProps) => {
    // return <div>列容器的标题</div>
    const { state, dispatch } = useAppState();
    const ref = useRef<HTMLDivElement>(null);

    const { drag } = useItemDrag({ type: "COLUMN", id, index, text })

    drag(ref)

    return (
        <ColumnContainer ref={ref}>
            <ColumnTitle>{text}</ColumnTitle>
            {state.lists[index].tasks.map((task, i) => (
                <Card text={task.text} key={task.id} index={i} />
            ))}

            <AddNewItem toggleButtonText="增加新的任务" onAdd={(text) =>
                dispatch({ type: "ADD_TASK", payload: { text, taskId: id } })
            } dark />
        </ColumnContainer>
    )
}